<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        body {
        background-color: #2c3e50;
        font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
        text-align: center;
        }
        p {
        line-height: 16px;
        }
        .main-container {
        padding: 100px 0px;
        }
        .card-container {
        -webkit-perspective: 800px;
        -moz-perspective: 800px;
        -o-perspective: 800px;
        perspective: 800px;
        margin-bottom: 30px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        }
        .card-container:hover .card,
        .card-container.hover.manual-flip .card {
        -webkit-transform: rotateY( 180deg);
        -moz-transform: rotateY( 180deg);
        -o-transform: rotateY( 180deg);
        transform: rotateY( 180deg);
        }
        .card-container.static:hover .card,
        .card-container.static.hover .card {
        -webkit-transform: none;
        -moz-transform: none;
        -o-transform: none;
        transform: none;
        }
        .card {
        -webkit-transition: -webkit-transform .5s;
        -moz-transition: -moz-transform .5s;
        -o-transition: -o-transform .5s;
        transition: transform .5s;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
        position: relative;
        }
        .front,
        .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -o-backface-visibility: hidden;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #FFF;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
        }
        .front {
        z-index: 2;
        }
        .back {
        -webkit-transform: rotateY( 180deg);
        -moz-transform: rotateY( 180deg);
        -o-transform: rotateY( 180deg);
        transform: rotateY( 180deg);
        z-index: 3;
        }
        .card {
        background: none repeat scroll 0 0 #FFFFFF;
        border-radius: 4px;
        color: #444444;
        }
        .card-container,
        .front,
        .back {
        width: 400px;;
        height: 420px;
        border-radius: 6px;
        }
        .card .cover {
        height: 105px;
        overflow: hidden;
        border-radius: 4px 4px 0 0;
        }
        .card .cover img {
        width: 100%;
        }
        .card .user {
        display: block;
        height: 120px;
        margin: -55px auto 0;
        overflow: hidden;
        width: 120px;
        }
        .card .user img {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 4px solid #FFFFFF;
        border-radius: 50%;
        width: 112px;
        }
        .card .content {
        background-color: rgba(0, 0, 0, 0);
        box-shadow: none;
        padding: 10px 20px 20px;
        }
        .text-center {
        text-align: center;
        }
        .card .content .main {
        min-height: 160px;
        }
        .card .back .content .main {
        height: 215px;
        }
        .card .name {
        font-size: 22px;
        line-height: 28px;
        margin: 10px 0 0;
        text-align: center;
        text-transform: capitalize;
        }
        .card h5 {
        margin: 5px 0;
        font-weight: 400;
        line-height: 20px;
        }
        .card .profession {
        color: #999999;
        text-align: center;
        margin-bottom: 20px;
        }
        .card .footer {
        border-top: 1px solid #EEEEEE;
        color: #999999;
        margin: 30px 0 0;
        padding: 10px 0 0;
        text-align: center;
        }
        .card .footer .social-links {
        font-size: 18px;
        }
        .card .footer .social-links a {
        margin: 0 7px;
        }
        .card .footer .btn-simple {
        margin-top: -6px;
        }
        .card .header {
        padding: 15px 20px;
        }
        .card .motto {
        border-bottom: 1px solid #EEEEEE;
        color: #999999;
        font-size: 14px;
        font-weight: 400;
        padding-bottom: 10px;
        text-align: center;
        }
        .title {
        color: #506A85;
        text-align: center;
        font-weight: 300;
        font-size: 44px;
        margin-bottom: 90px;
        line-height: 90%;
        }
        .title small {
        font-size: 17px;
        color: #999;
        text-transform: uppercase;
        margin:
        }
        svg.icon {
        width: 14px;
        height: 18px;
        vertical-align: middle;
        fill: #337AB7;
        transition: fill .25s;
        }
        svg.icon:hover {
        fill: #2c3e50;
        transition: fill .25s;
        }
        a {
        text-decoration: none;
        }
        </style>
        <title>lhzbxx</title>
    </head>
    <body>
        <svg display="none">
            <symbol id="at" viewBox="0 0 1024 1024">
            <path d="M512 0C229.218 0 0 229.218 0 512s229.218 512 512 512 512-229.218 512-512S794.782 0 512 0zM512 944c-238.594 0-432-193.406-432-432S273.406 80 512 80s432 193.406 432 432S750.594 944 512 944zM631.688 396.718c0.344-2.218 0.5-4.282 0.5-6.188 0-17.594-11-26.344-33-26.344-10.562 0-17.688 1.812-21.376 5.376-3.75 3.624-6.312 10.782-7.812 21.5-8.438-11.876-16.938-19.876-25.5-24.032-7.876-3.782-19.156-5.656-33.75-5.656-37.594 0-70.218 19.124-97.75 57.344-25.376 35.156-38.032 72.718-38.032 112.656 0 31.188 8.218 58.562 24.688 82.188 18.25 26.032 42.124 39.032 71.532 39.032 25.188 0 49.376-9.032 72.532-27.094 10.438 18.062 28.282 27.094 53.468 27.094 47.688 0 88.532-20.124 122.438-60.406C751.876 553.876 768 509.812 768 460.062c0-59.5-25.032-109.124-75.094-148.844C646.532 274.438 593.5 256 533.688 256c-77.812 0-143.124 24.594-196.032 73.812C283.218 380.562 256 445.312 256 524.124c0 80.532 27.906 142.376 83.656 185.562C389.718 748.594 455.376 768 536.688 768c34.624 0 68.376-5.406 101.312-16.282 36.124-11.844 65.844-28.718 89.188-50.594 7.532-7.218 14.782-16 21.656-26.312 8.594-12.594 12.844-22.75 12.844-30.468 0-5.844-2.032-11.062-6.156-15.656-4.094-4.562-9.032-6.844-14.718-6.844-10.782 0-19.844 3.812-27.25 11.344-12.218 13.124-21.312 23.124-27.188 30-40 34.938-89.688 52.406-149.188 52.406-63.812 0-114.876-15.656-153.156-46.968-41.844-34.218-62.75-83.25-62.75-147.062 0-61.938 19.876-113.688 59.718-155.25C420.812 324.782 470.968 304 531.406 304c47.562 0 87.094 13.5 118.656 40.562 33.812 28.688 50.656 66.876 50.656 114.5 0 24.938-4.25 48.188-12.844 69.656-9.562 24.094-23.438 42.656-41.562 55.718-13.624 9.782-24.282 14.688-32 14.688-8.406 0-12.594-3.938-12.594-11.844 0-3.282 2.156-18.406 6.562-45.438L631.688 396.718zM534.688 539.156c-15.468 42.906-31.938 64.376-49.376 64.376-26.062 0-39.094-16.624-39.094-49.906 0-25.844 7.468-54.938 22.468-87.376 17.468-38.282 37.344-57.406 59.688-57.406 9.25 0 16.124 5 20.656 14.968 3.688 7.624 5.532 16.688 5.532 27.188C554.562 473.438 547.968 502.812 534.688 539.156z" />
            </symbol>
            <symbol id="weibo" viewBox="0 0 1024 1024">
            <path d="M-56.57-52.89v0 0zM743.314 475.6q-16.558-3.318-21.501-9.921t-1.659-12.145l3.318-5.508q1.094-1.094 2.224-3.318t4.414-9.391 4.978-14.334 2.753-17.652-0.564-19.877-6.638-20.407-13.805-19.877q-15.463-15.463-40.284-19.877t-49.641-0.564-46.885 9.921-36.4 11.581l-14.334 6.638q-11.050 3.318-18.218 4.414t-11.050-0.564-6.073-3.318-1.659-7.732 1.094-10.485 2.753-13.805 3.318-14.899q0-13.239-1.659-24.819t-7.167-25.914-15.994-23.161-26.48-14.334-41.379-3.318-57.372 13.239q-38.624 13.239-78.342 39.154t-68.951 54.052-53.523 54.618-37.53 43.038l-12.145 17.652q-36.4 47.451-54.052 94.901t-16.558 71.707v23.161q6.638 52.958 32.551 94.901t61.785 67.857 84.415 44.132 93.242 26.48 94.337 11.581q81.662 6.638 169.36-12.675t163.289-66.763 106.481-113.649q18.747-38.624 19.313-72.836t-11.581-55.712-31.457-38.060-36.4-24.29-30.327-9.921zM406.816 818.735q-119.156 5.508-202.443-46.356t-83.285-131.301q0-78.342 82.756-135.15t203.007-62.35 203.007 39.718 82.756 123.569q0 79.438-84.415 142.882t-201.348 68.951zM374.83 513.094q-31.986 3.318-57.372 14.899t-39.718 26.48-24.29 31.986-13.805 33.646-4.978 30.327-1.094 21.501l1.094 8.827v4.414q0 3.318 2.224 13.239t6.073 18.218 12.675 18.218 20.972 16.558q72.836 35.306 135.714 21.501t101.503-63.443q15.463-18.747 20.407-46.356t-2.224-55.712-24.819-51.299-52.394-35.871-80.003-7.167zM335.11 721.645q-6.638 1.094-12.675 0.564t-11.050-2.224-9.921-3.847-8.261-6.073-6.073-7.732-4.414-8.827-1.659-10.485q0-12.145 6.638-23.725t18.218-19.877 25.914-9.391q9.921-1.094 19.313 0.564t15.994 5.508 11.581 8.827 7.167 11.581 2.224 14.334q0 12.145-7.167 23.161t-19.313 18.747-26.48 8.827zM428.882 642.207q-7.732 5.508-15.994 4.978t-11.581-7.167l-2.224-4.414q-1.094-2.224-1.094-4.414v-4.414q0-3.318 1.094-5.508l2.224-4.414q1.094-2.224 3.318-3.318l3.318-4.414q8.827-6.638 17.088-5.508t11.581 8.827q3.318 4.414 2.753 9.921t-3.318 10.485-7.167 9.391zM820.562 411.591q6.638 0 12.145-3.318t8.827-8.261 4.414-10.485q1.094-1.094 1.094-3.318 13.239-125.794-88.265-143.446-29.798-5.508-55.182-1.094-7.732 0-13.239 3.847t-9.391 9.921-3.847 12.675q0 11.050 7.732 18.747t18.747 7.732q86.075-19.877 92.677 55.182 2.224 18.747-2.224 35.306 0 11.050 7.732 18.747t18.747 7.732zM801.815 100.478q-48.545-11.050-130.207 4.414-1.094 0-2.224 1.094l-1.094 2.224-1.094 1.094q-12.145 3.318-19.877 13.805t-7.732 22.63q0 16.558 11.050 27.574t26.48 11.050h3.318q1.094 0 4.978-1.094t8.261-1.659 9.391-2.224 8.827-3.318 14.899-1.659 27.044 1.659 35.306 8.261 38.624 16.558 38.624 27.574 33.646 40.813q28.704 65.104 11.050 125.794 0 1.094-0.564 2.224t-1.659 5.508-2.224 8.261-2.224 9.921-1.094 10.485q0 9.921 5.508 16.558t13.805 9.391 19.313 2.753q30.893 0 36.4-37.53 13.239-43.038 14.899-82.192t-5.508-68.951-21.501-55.712-33.116-44.132-41.943-33.116-44.697-23.725-44.697-14.334z" />
            </symbol>
            <symbol id="github" viewBox="0 0 1024 1024">
            <path d="M64 524C64 719.602 189.356 885.926 364.113 947.017 387.65799 953 384 936.115 384 924.767L384 847.107C248.118 863.007 242.674 773.052 233.5 758.001 215 726.501 171.5 718.501 184.5 703.501 215.5 687.501 247 707.501 283.5 761.501 309.956 800.642 361.366 794.075 387.658 787.497 393.403 763.997 405.637 743.042 422.353 726.638 281.774 701.609 223 615.67 223 513.5 223 464.053 239.322 418.406 271.465 381.627 251.142 320.928 273.421 269.19 276.337 261.415 334.458 256.131 394.888 302.993 399.549 306.685 432.663 297.835 470.341 293 512.5 293 554.924 293 592.81 297.896 626.075 306.853 637.426 298.219 693.46 258.054 747.5 262.966 750.382 270.652 772.185 321.292 753.058 381.083 785.516 417.956 802 463.809 802 513.5 802 615.874 742.99 701.953 601.803 726.786 625.381 750.003 640 782.295 640 818.008L640 930.653C640.752 939.626 640 948.664978 655.086 948.665 832.344 888.962 960 721.389 960 524 960 276.576 759.424 76 512 76 264.577 76 64 276.576 64 524Z" />
            </symbol>
            <symbol id="mail" viewBox="0 0 1024 1024">
            <path d="M160.2609 975.6205V359.2324404054051h197.2523502528889v98.6231335154765h-98.62817385325548v419.1428211672486h517.7891682997931V457.8555739208816h-98.62517576303895v-98.6231335154765h197.2523502528889v616.3890881982016H160.26091379791072zM554.7656 147.6379v507.46094148167543h-73.97088054909023V147.6608859193467l-119.9106 112.8535-52.2987-73.8719L517.7812-10.264l209.2437 196.9075-52.2987 73.8719L554.7656 147.6379z" />
            </symbol>
        </svg>
        <div class="card-container">
            <div class="card">
                <div class="front">
                    <div class="cover">
                        <img src="header.jpg"/>
                    </div>
                    <div class="user">
                        <img class="img-circle" src="avatar.jpg"/>
                    </div>
                    <div class="content text-center">
                        <div class="main">
                            <h3 class="name"><img src="name.png" alt="鲁浩"></h3>
                            <p class="profession">Full Stack Developer</p>
                            <h5> Shanghai,China</h5>
                            <h5> Freelance </h5>
                            <h5> lhzbxx@gmail.com</h5>
                        </div>
                    </div>
                </div>
                <div class="back">
                    <div class="header">
                        <h5 class="motto">"May the force be with you!"</h5>
                    </div>
                    <div class="content">
                        <div class="main">
                            <h4 class="text-center">Experince</h4>
                            <p>2+ years</p>
                            <p>10+ projects</p>
                            <h4 class="text-center">Areas of Expertise</h4>
                            <p>Server</p>
                            <p>Database</p>
                            <p>Front-end</p>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="social-links text-center">
                            <a href="https://www.github.com/lhzbxx" class="link" target="_blank">
                                <svg class="icon"><use xlink:href="#github" /></svg>
                            </a>
                            <a href="http://weibo.com/3789369385" class="link" target="_blank">
                                <svg class="icon"><use xlink:href="#weibo" /></svg>
                            </a>
                            <a href="mailto:lhzbxx@gmail.com" class="link" target="_blank">
                                <svg class="icon"><use xlink:href="#at" /></svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        console.log('写的超烂嘚儿，不要看啦！');
    </script>
</html>
